<template>
    <view  :style="{height:storeHeight-45 + 'px'}">
        <scroll-view scroll-y="true" :scroll-into-view='toItem' :scroll-top="scrollTop" @scroll="scrollMove()" style="height: 100%" show-scrollbar=false>
             <view v-for="(food,index) in goodsList" class="food-item" :key="index" :id="'item_'+food.id">
                <view class="icon" @click="showGoodsDetail($event)" :data-index="index">
                    <image :src="food.icon" lazy-load="true"></image>
                </view>
                <view class="content">
                    <view class="name" :class="food.id==goodsId ? 'green' : '' ">{{food.name}}</view>
                    <view class="desc">{{food.description}}</view>
                    <view class="extra">月售{{food.buy_num}}</view>
                    <view class='price_bar'>
                      <view class="price">
                        <view class="now">￥{{food.price}}</view>
                        <view class="old" v-if="food.show_price > 0">￥{{food.show_price}}</view>
                      </view>
                    <!--cartControl-->
                        <view class="cartControl-wrapper">
                            <block v-if=' !storeInfo.disable || storeInfo.reserve_start != 0 '>
                                <block v-if="food.sel_out > 0">
                                    <view style="color:#545455;font-size:30rpx;">已售完</view>
                                </block>
                                <block  v-else>
                                    <view class="cartControl">
                                        <view class="flex">
                                            <block  v-if="header == 'buy_together'">
                                                <view class="cart-decrease"  v-if="food.self > 0" :data-link="food.category_id" :data-id="food.id" :data-index="index" @click="decreaseCart($event)">
                                                    <view class="inner"></view>
                                                </view>
                                                <view class="cart-decrease disable" v-if="food.other > 0 && food.self == 0" :data-id="food.id" :data-index="index">
                                                    <view class="inner"></view>
                                                </view>
                                                <view class="cart-count" v-if="food.other+food.self > 0 ">
                                                    {{food.other+food.self}}
                                                </view>
                                            </block>
                                            <block v-else>
                                                <view class="cart-decrease" v-if="food.Count > 0" :data-link="food.category_id" :data-id="food.id" :data-index="index" @click="decreaseCart($event)">
                                                    <view class="inner"></view>
                                                </view>
                                                <view class="cart-count" v-if="food.Count > 0 ">
                                                    {{food.Count}}
                                                </view>
                                            </block>
                                            <view class="cart-add" :data-index="index" :data-link="food.category_id" :data-id="food.id" @click="addCart($event)"></view>
                                        </view>
                                    </view>
                                </block>
                            </block>
                            
                        </view>
                     </view>
                    <block v-if="food.open_discount > 0">
                        <view class="discount-tag">{{food.discount.discount}}折 {{food.discount.num_discount >
                            0?'限'+food.discount.num_discount+'份':''}}
                        </view>
                    </block>
                </view>
            </view>
            <view :class=" bang ? 'food-item-plank-bang' : 'food-item-plank' "></view>
        </scroll-view>
       <!--box 弹窗-->
        <view class="setting-box" v-if="setting.show">
            <view class='setting-mask' @click='closeSetting()'></view>
            <view class='setting-view'>
                <image class="close_icon" @click='closeSetting()' src="http://img1.birdback.org/a/0d/08/0d086db73d634f97c3940279c2ebbdd3.png"></image>
                <view class='setting-head'>
                    <!-- <view class='close' @click='closeSetting()'></view> -->
                    <view class='title'>
                        <text>{{setting.name}}</text>
                    </view>
                </view>
                <view class='setting-item'>
                    <scroll-view scroll-y style="max-height: 600rpx;" :scroll-top="scollTop">
                        <block v-for='(item,idx) in setting.item' :key="idx">
                            <view class='item'>
                                <view class='title flex'>{{item.name}}</view>
                                <view class='button-list'>
                                    <block v-for='(list,index) in item.value'  :key="index">
                                        <block v-if="item.name == '规格' && list.num <= 0">
                                            <view>{{list.name}}(已售完)</view>
                                        </block>
                                        <block v-else>
                                            <view @click='selectSetting($event)' :data-idx='idx' :data-link="food.category_id" :data-index='index' :class='list.current == 1?"ck":""'>{{list.name}}
                                            </view>
                                        </block>
                                    </block>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <view class='setting-price'>
                        <text v-if="setting.price > 0">￥{{setting.price}}</text>
                        <text class="old" v-if="setting.showPrice > 0">￥{{setting.showPrice}}</text>
                        <view @click='settingInsert()'>选好了</view>
                    </view>
                </view>
            </view>
        </view>
        
         <view class="goodsDetail-box" v-if="goodsDetail.show">
            <view class='goodsDetail-mask' @click="closeGoodsDetail()"></view>
            <view class='goodsDetail-content'>
                <view class="goodsDetail-image">
                    <image :src="goodsDetail.src"></image>
                    <text class="goodsDetail-title">{{goodsDetail.title}}</text>
                    <text class="goodsDetail-info">{{goodsDetail.info}}</text>
                    <text class="goodsDetail-num">月售{{goodsDetail.num}}份</text>
                    <text class="goodsDetail-price">￥{{goodsDetail.price}}</text>
                    <view class="goodsDetail-status">
                        <block v-if='!storeInfo.disable'>
                            <block v-if="goodsDetail.sel_out > 0">
                                <view style="color:#545455;font-size:30rpx;">已售完</view>
                            </block>
                            <block v-else>
                                <view class="goodsDetail-add" :data-index="goodsDetail.index" @click="addDetailCart($event)"></view>
                            </block>
                        </block>
                    </view>
                </view>
                <view class='close_together' @click="closeGoodsDetail()"> </view>  
            </view>
        </view>
        
    </view>
</template>

<script>
    export default {
		name: "goods-item",
        data() {
        	return {
        		storeHeight_1: this.storeHeight
        	}
        },
		props: {
            bang: {
                type: String,
                defalut:''
            },
            goodsId: {
                type: String,
                defalut:''
            },
            storeHeight: {
                type: Number,
                defalut: 0
            },
            scrollTop: {
                type: Number,
                defalut: 0
            },
            toItem: {
                type: String,
                defalut:''
            },
            header: {
                type: String,
                defalut:''
            },
			goodsList:{
				type: Array,
				defalut: []
			},
            setting: {
                show: {
                    type:Boolean,
                    defalut:false
                },
                item:{
                    type: Array,
                    defalut: []
                },
                price: {
                    type: Number,
                    defalut: 0
                },
                showPrice: {
                    type: Number,
                    defalut: 0
                }
            },
            goodsDetail: {
                show: {
                        type:Boolean,
                        defalut:false
                    },
                index: {
                        type: Number,
                        defalut: 0
                    },
                src: {
                        type: String,
                        defalut: ''
                    },
                title: {
                        type: String,
                        defalut: ''
                    },
                info: {
                        type: String,
                        defalut: ''
                    },
                num: {
                        type: String,
                        defalut: ''
                    },
                price: {
                        type: String,
                        defalut: ''
                    },
                sel_out: {
                        type: Number,
                        defalut: 0
                    }
            },
		},
		
		// watch:{
		//     storeHeight(val){
		//         this.storeHeight_1 = val;
		//     }
		// },
		onLoad() {
				//console.log(getApp().globalData.navHeight);
		},
		methods: {
			addCart: function(e){
				this.$emit('addCart',e);
			},
			decreaseCart: function(e){
				this.$emit('decreaseCart',e);
			},
            showGoodsDetail: function(e){
                this.$emit('showGoodsDetail',e);
            },
            closeSetting:function(){
                this.$emit('closeSetting');
            },
            selectSetting: function(e){
                this.$emit('selectSetting',e);
            },
            settingInsert: function(e){
                this.$emit('settingInsert',e);
            },
            closeGoodsDetail: function(){
                this.$emit('closeGoodsDetail');
            },
            addDetailCart: function(e){
                this.$emit('addDetailCart',e);
            },
            scrollMove:function(){
                this.$emit('scrollMove');
            },
            // scrollGoods:function(e){
            //     this.$emit('scrollGoods',e);
            // },
            // scrollGoodsTop:function(e){
            //     this.$emit('scrollGoodsTop',e);
            // }
            
		}
	} 
</script>

<style lang="scss">
.food-item {
  display: flex;
  min-height: 178rpx;
  margin-left: 20rpx;
  position: relative;
  /* border-bottom: 1px solid rgba(7, 17, 27, 0.1); */
}


.food-item .icon {
    margin-top: 30rpx;
}

.food-item .icon image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}

.food-item .content {
  flex: 1;
  position: relative;
  padding-bottom:20rpx;

}

.food-item .content .name {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #333;
  line-height: 38rpx;
  margin: 30rpx 0 0 20rpx;
  font-weight:：500;
}
.food-item .content .name.green {
  color: #12D195;
}

.food-item .content .desc, .extra {
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #666;
  line-height: 22rpx;
  margin: 16rpx 0 0 20rpx;
}

.food-item .content .desc {
  margin: 16rpx 0 0 20rpx;
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #666;
  line-height: 28rpx;
}

.food-item .content .price {
  /* position: absolute;
  top: 161rpx;
  left: 135rpx; */
  display: flex;
  flex-direction: row;
}

.food-item .content .price .now {
  font-size: 36rpx;
  color: #ff4f54;
  line-height: 52rpx;
  font-weight:500;
}

.food-item .content .price .old {
  font-size: 24rpx;
  color: #999;
  line-height: 50rpx;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.food-item .content .discount-tag{
  font-size:22rpx;
  color:#FF4F54;
  border: 2rpx solid rgba(255, 110, 110, .5);
  display: inline-block;
  border-radius: 5rpx;
  padding:0rpx 10rpx;
  /* position: absolute;
  top:210rpx; */
  margin:0 0 0 20rpx;
}
.cartControl-wrapper .cartControl {
  font-size: 0;
}

.cartControl-wrapper .cartControl .cart-decrease, .cart-add {
  display: inline-block;
}

// .cartControl-wrapper .cartControl .cart-decrease, .cart-add :fade-enter-active,
// :fade-leave-active {
//   transition: all 0.4s linear;
// }
// 
// .goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,
// .cart-add :fade-enter, :fade-leave-active {
//   opacity: 0 transform translate3d(24px, 0, 0);
// }

.cartControl-wrapper .cartControl .cart-decrease, .cart-add .inner {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  vertical-align: top;
  background: url(http://img1.birdback.org/a/75/fb/75fbee2ebf9e90205476516e6efb4014.png)no-repeat;
  background-size: 100% 100%;
}
.cartControl-wrapper .cartControl .cart-decrease.disable{
    background: url(http://img1.birdback.org/a/a9/78/a978e7cdcee7dfaf227d4dab85823dc5.png)no-repeat;
    background-size: 100% 100%;
}

// .cartControl-wrapper .cartControl .cart-decrease, .cart-add :inner-enter-active,
// :inner-leave-active {
//   transition: all 0.4s linear;
//   transform: rotate(0);
// }
// 
// .cartControl-wrapper .cartControl .cart-decrease, .cart-add :inner-enter,
// :inner-leave-active {
//   opacity: 0 transform rotate(180deg);
// }

.cartControl-wrapper .cartControl .cart-count {
  display: inline-block;
  width: 60rpx;
  height: 50rpx;
  vertical-align: top;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #545455;
  line-height: 50rpx;
}

.cartControl-wrapper .cartControl .cart-add {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  vertical-align: top;
  background: url(http://img1.birdback.org/a/b3/4d/b34dde29c422f07d5e46a4faff7538da.png)no-repeat;
  background-size: 100% 100%;
}
.price_bar{
  margin-top:20rpx;
  display: flex;
  width:100%;

}
.price_bar .price{
  flex:1;
  margin-left: 20rpx;
  }
.price_bar .cartControl-wrapper{
  margin-right: 24rpx;
}
.goodsDetail-box {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  transition: all .2s ease;
}

.goodsDetail-mask {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
}

.goodsDetail-content{
  width: 650rpx;
  z-index: 2;
  top:150rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}
.goodsDetail-image{
    position: relative;
    border-radius: 16rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;
    padding-bottom: 30rpx;
}
.goodsDetail-content image{
  width: 650rpx;
  height: 650rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.goodsDetail-title{
  font-size:36rpx;
  font-weight:500;
  color:#333;
  margin:30rpx 0 0 24rpx;
}

.goodsDetail-info{
  font-size:24rpx;
  color:#666;
  margin:5rpx 0 0 24rpx;
}

.goodsDetail-num{
  font-size:22rpx;
  color:#666;
  margin:5rpx 0 0 24rpx;
}

.goodsDetail-price{
  font-size:36rpx;
  color:#FF2C2B;
  font-weight:500;
  margin:30rpx 0 0 24rpx;
}

.goodsDetail-status{
    position: absolute;
    bottom:34rpx;
    right:24rpx;
}
.goodsDetail-add{
  width: 50rpx;
  height: 50rpx;
  vertical-align: top;
  background: url(http://img1.birdback.org/a/b3/4d/b34dde29c422f07d5e46a4faff7538da.png)no-repeat;
  background-size: 100% 100%;
}
.setting-box {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.setting-mask {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.1;
}

.setting-view {
  position: relative;
  z-index: 2;
  width: 85%;
  background: #fff;
  border-radius: 16rpx;
}
.setting-box .close_icon{
    width:34rpx;
    height:36rpx;
    position:absolute;
    top:30rpx;
    right:30rpx;
}

.setting-head {
  width: 100%;
}

.setting-head .close {
  width: 52rpx;
  height: 52rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/diandan_tankuangguanbi@3x.png)no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 14rpx;
  top: 14rpx;
}

.setting-head .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC-Medium;
  font-size: 36rpx;
  color: #181830;
  margin-top: 60rpx;
}

.setting-item {
  display: flex;
  width: 100%;
  margin-top: 35rpx;
  flex-direction: column;
  align-items: center;
}

.setting-item .item {
  margin-bottom: 20rpx;
  padding: 0 30rpx;
}

.setting-item .item .title {
  font-size: 28rpx;
  color: #545455;
  min-height: 70rpx;
  line-height: 24rpx;
  justify-content: flex-start;
}

.setting-item .item .button-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -4rpx;
  justify-content: flex-start;
}

.setting-item .item .button-list view {
  min-width: 90rpx;
  height: 64rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  line-height: 70rpx;
  text-align: center;
  background: #f5f5f5;
  color: #545455;
  margin-right: 20rpx;
  margin-top: 24rpx;
  padding: 0 30rpx;
}

.setting-item .item .button-list .ck {
  /* min-width: 172rpx;
  height: 60rpx; */
  color: #00b89d;
  background: #defaf1;
  /* border: 2rpx solid #009c73; */
  /* line-height:65rpx; */
}

.setting-price {
  position: relative;
  width: 100%;
  height: 118rpx;
  border-top: 1px solid rgba(7, 17, 27, 0.1);
}

.setting-price text {
  position: absolute;
  top: 41rpx;
  left: 32rpx;
  font-family: PingFangSC-Medium;
  font-size: 36rpx;
  color: #ff4f54;
}

.setting-price view {
  position: absolute;
  width: 200rpx;
  height: 70rpx;
  background: #12D195;
  border-radius: 100px;
  right: 32rpx;
  top: 24rpx;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 72rpx;
}

.setting-price .old{
  font-size: 24rpx;
  color: #c7c7c7;
  line-height: 24rpx;
  text-decoration: line-through;
  margin: 10rpx 0 0 16rpx;
  left:120rpx;
  top:48rpx;
}

.food-item-plank{
    height: 150rpx;
}
.food-item-plank-bang{
    height: 120rpx;
}


</style>
